<template>
    <div v-if="data.goods" id="item" @click="goHuajuanGoodsDetail">
        <img class="giaoImage" :src="data.goods.goods_image" alt="商品图片" />
        <div class="giaoInfo">
            <h1 class="giaoDesc">{{ data.goods.goods_desc }}</h1>
            <div class="giaoName">{{ data.goods.goods_name }}</div>
            <div class="giaoPrice">
                <span>售价：&yen;{{ data.goods.goods_price }}</span>
                <label v-if="data.goods.goods_hj_price">
                    市场价：&yen;{{ data.goods.goods_hj_price }}
                </label>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "item",
    data() {
        return {};
    },
    props: ["data"],
    methods: {
        //跳转商品详情
        goHuajuanGoodsDetail() {
            window.location.href = `https://m.huajuanmall.com/huajuan_h5/#/goods/detail?id=${this.data.goods.goods_id}`;
        }
    }
};
</script>

<style scoped lang="stylus">
#item {
    width: 350px;
    border-radius: 8px;
    margin-top: 10px;
    overflow: hidden;
    // border: 2px solid #62b587;
    box-shadow: 0 0.04rem 0.62rem 0 rgba(19, 19, 20, 0.04);
}

.giaoImage {
    display: block;
    width: 100%;
}

.giaoInfo {
    padding: 0 20px 20px 20px;
}

.giaoDesc {
    font-size: 26px;
    margin-top: 10px;
}

.giaoName {
    font-size: 24px;
    margin-top: 10px;
}

.giaoPrice {
    margin-top: 10px;
}

.giaoPrice span {
    font-size: 24px;
    color: #62b587;
}

.giaoPrice label {
    font-size: 22px;
    color: #8a8c93;
    text-decoration: line-through;
    margin-left: 20px;
}
</style>